<template>
  <view class="content">
    <!-- 头部 -->
    <!-- <view
      class="header common_bg"
      v-if="goods"
      :style="{
        'background-image': `url(${goods.imgurl_detail})`
      }"
    > -->
    <uni-nav-bar
      left-icon="left"
      :title="goods.title"
      color="#fff"
      backgroundColor="transparent"
      :fixed="true"
      :statusBar="true"
      :border="false"
      @clickLeft="back"
    ></uni-nav-bar>

    <!-- 
      <view class="header_news">
        <view
          class="header_news_t common_bg"
          :style="{
            'background-image': `url(${$img(
              '/static/img/inf_banner_ft_bg.png'
            )})`
          }"
        >
          <view class="header_news_t_price">
            <view>抽奖需要{{ goods.need_draw_num || 0 }}张抽奖券</view>
          </view>
          <view
            class="redu"
            v-if="goods.join_user && goods.join_user.length > 0"
          >
            <image
              :src="item"
              v-for="(item, index) in goods.join_user"
              :key="index"
              v-if="index < 5"
              :style="'transform:translateX(' + -index * 20 + 'rpx' + ')'"
            ></image>
            {{ join_count }}次参与
          </view>
        </view>
      </view> -->
    <!-- </view> -->

    <view v-if="goods" class="hot-num">
      <view class="user-list">
        <view
          class="avatar icon"
          v-for="(item, i) in goods.join_user.slice(0, 5)"
          :key="i"
          :style="{
            'z-index': `${i + 1}`
          }"
        >
          <image :src="item"></image>
        </view>
      </view>

      <view class="num">{{ join_count }}次参与</view>
    </view>

    <swiper class="sw-wrap" autoplay circular>
      <swiper-item v-for="(item, i) in shangGoods" :key="i">
        <view class="pic">
          <image :src="item.imgurl" lazy-load></image>
        </view>
      </swiper-item>
    </swiper>

    <view
      class="tong-ji"
      @click="$refs.shuoming.open()"
      :style="{
        top: `calc(${$sys().statusBarHeight}px + 88rpx + 150rpx)`
      }"
    >
      <image :src="$img('/static/img/info.png')" mode="scaleToFill" />

      抽赏说明
    </view>

    <view class="ticket-num">
      <view class="ticket-num-inner">
        抽奖需要{{ goods.need_draw_num || 0 }}张抽奖券
      </view>
    </view>

    <view
      class="goods-title common_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img/2_title_bg.png')})`
      }"
    >
      <text class="hang1">{{ goods.title }}</text>
    </view>

    <view
      class="type-list common_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img/2_type_bordder.png')})`
      }"
    >
      <view class="type-item" v-for="(item, i) in shang_list" :key="i">
        <view
          class="dot"
          :style="{
            'background-color': item.shang_color
          }"
        ></view>

        <view class="title">
          {{ item.shang_title }}

          <text>{{ item.pro }}</text>
        </view>
      </view>
    </view>

    <!-- <scroll-view
      scroll-x="true"
      class="shangList common_bg"
      :style="{
        'background-image': `url(${$img(
          '/static/img/inf_parize_type_list.png'
        )})`
      }"
    >
      <view class="shangList_item">
        <view v-for="(item, index) in shang_list" :key="index">
          <view :style="'color:' + item.shang_color">
            {{ item.shang_title }}款
          </view>

          <view>{{ item.pro }}</view>
        </view>
      </view>
    </scroll-view> -->

    <view class="choujiang">
      <!-- 切换 -->
      <view class="qiehuan">
        <view @click="getlist(i)" v-for="(v, i) in list" :key="i">
          <view :class="show == i ? 'xzs' : 'wzs'">{{ v.name }}</view>
          <view class="qiehuan_line" v-if="show == i">
            <!-- <image :src="$img('/static/img/tab_arrow.png')"></image> -->
          </view>
        </view>
      </view>
    </view>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      @up="upCallback"
    >
      <!-- 赏池预览 直接展示所有赏品 -->
      <view
        class="shop"
        v-if="show == 0 && shangGoods.length > 0"
        :style="{
          display: `flex`,
          'flex-flow': `row wrap`,
          padding: `1rpx 30rpx 0`
        }"
      >
        <view
          v-for="(item, index) in shangGoods"
          :key="index"
          class="shop_item"
          @click="previewDetail(item)"
        >
          <view class="item_head">
            <image :src="item.imgurl"></image>
            <view class="item_num">
              <view :style="'color:' + item.shang_color">
                {{ item.shang_title }}
              </view>
            </view>
          </view>
          <view class="shop_con">
            <view class="hang1" style="color: #ffffff">{{ item.title }}</view>
            <view class="hang1">{{ item.pro }}</view>
            <view class="hang1" v-if="item.shang_id > 5">
              售价:{{ item.price }}
            </view>
          </view>
          <view class="qiangguang" v-if="item.surplus_stock == 0">
            <image :src="z_imgPath + 'detail/qiangguangle.png'"></image>
          </view>
        </view>
      </view>
      <!-- 中赏记录 -->
      <view class="jilv" v-if="show == 1 && shang_cate.length > 0">
        <scroll-view scroll-x class="jilv_title">
          <view
            class="jilv-tab common_bg"
            v-for="(item, index) in shang_cate"
            :key="index"
            @click="change_shang_id(item.shang_id)"
            :class="{
              act: shang_id == item.shang_id
            }"
            :style="{
              'background-image': `url(${$img('/static/img/2_tab_bg.png')})`
            }"
          >
            {{ item.shang_title }}
          </view>
        </scroll-view>
        <view v-for="(item, index) in jl_Arr" :key="index" class="jilv_con">
          <view class="jilv_list">
            <view class="log-tag">
              {{ item.luck_no }}
            </view>

            <view class="jilv_list_l">
              <image class="avatar" :src="item.headimg" mode="scaleToFill" />

              <view class="info">
                <view class="name hang1">{{ item.nickname }}</view>

                <view class="time">{{ item.addtime }}</view>
              </view>
            </view>
            <view class="log-item-r">
              <!-- <view class="type">{{ item.shang_title }}</view> -->

              <view class="prize">
                <image
                  class="pic"
                  :src="item.goodslist_imgurl"
                  mode="scaleToFill"
                />

                <view class="prize-title hang1">
                  {{ item.goodslist_title }}
                </view>
                ×1
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>

    <!-- 抽奖按钮 -->
    <view class="bar_box">
      <view
        @click="pay"
        class="draw-btn"
        :class="{
          dis: hasNum == 0
        }"
      >
        当前有{{ hasNum }}张抽奖券,{{
          hasNum == 0 ? '请先获取抽奖券' : '立即抽赏'
        }}
      </view>
    </view>

    <!-- 刷新浮框 -->
    <view class="xuanfu">
      <image
        :src="$img('/static/img/refresh.png')"
        @click="loadData(1, true)"
      ></image>

      <button open-type="share" hover-class="">
        <image :src="$img('/static/img/share.png')"></image>
      </button>

      <image :src="$img('/static/img/bag.png')" @click="toBag"></image>
    </view>

    <!-- 购买说明 -->
    <uni-popup ref="shuoming" type="center">
      <view
        class="popGm common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`
        }"
      >
        <view class="pop_title">抽赏说明</view>

        <view class="pop_con">
          <scroll-view scroll-y="true" style="height: 600rpx">
            <view v-html="news"></view>
          </scroll-view>
        </view>

        <image
          @click="$refs.shuoming.close()"
          class="close"
          :src="$img('/static/icon/close.png')"
        ></image>
      </view>
    </uni-popup>

    <!-- 确认订单 -->
    <uni-popup ref="order_show" type="bottom" :isMaskClick="false">
      <view class="order animated fadeInUp">
        <view class="order_title">
          <view class="ca">确认订单</view>
          <image
            :src="$img('/static/icon/close1.png')"
            @click="$refs.order_show.close()"
          ></image>
        </view>
        <view class="order_title_con1">
          <view class="order_pic" v-if="pay_news.goods">
            <view class="order_pic_img">
              <image :src="pay_news.goods.imgurl_detail"></image>
            </view>
            <view>
              <view style="font-size: 35rpx">{{ pay_news.goods.title }}</view>
              <view style="margin-top: 40rpx">类型：明信片</view>
              <view style="margin-top: 10rpx">
                <text>
                  <text style="font-family: zihun152hao-jijiachaojihei">
                    {{ pay_news.goods.price }}元
                  </text>
                </text>
                <text>×{{ pay_news.goods.prize_num }}</text>
              </view>
            </view>
          </view>
          <view class="order_num">
            <view style="font-size: 28rpx" v-if="pay_news.goods">
              明信片×{{ pay_news.goods.prize_num }}
            </view>
            <view>
              小计:{{ goods.box_type == 5 ? '' : '￥' }}
              <text>
                {{ pay_news.order_total
                }}{{ goods.box_type == 5 ? '积分' : '' }}
              </text>
            </view>
          </view>
        </view>
        <view class="order_title_con1" v-if="goods.box_type != 1">
          <view style="font-size: 28rpx; margin-bottom: 10rpx">支付方式</view>
          <view
            class="fangshi"
            @click="change_yuan_index(1)"
            v-if="goods.type != 3"
            style="padding-bottom: 15rpx"
          >
            <view class="flex_center">
              <image
                :src="$img('/static/icon/coin.png')"
                style="width: 40rpx; height: 40rpx"
              ></image>
              <view>
                使用余额抵扣￥
                <text>{{ pay_news.use_integral }}</text>
                （剩余：
                <text>{{ pay_news.integral }}</text>
                ）
              </view>
            </view>
            <image
              v-if="bi"
              :src="$img('/static/icon/check_act.png')"
              style="width: 40rpx; height: 40rpx"
            ></image>
            <image
              v-else
              :src="$img('/static/icon/check.png')"
              style="width: 40rpx; height: 40rpx"
            ></image>
          </view>
          <view
            class="fangshi"
            @click="change_yuan_index(2)"
            style="
              border-top: 1px solid rgba(255, 255, 255, 0.2);
              padding-top: 15rpx;
            "
          >
            <view class="flex_center">
              <image
                :src="$img('/static/icon/balance.png')"
                style="width: 40rpx; height: 40rpx"
              ></image>
              <view>
                使用余额抵扣￥
                <text>{{ pay_news.use_money }}</text>
                （剩余：
                <text>{{ pay_news.money }}</text>
                ）
              </view>
            </view>
            <image
              v-if="yue"
              :src="$img('/static/icon/check_act.png')"
              style="width: 40rpx; height: 40rpx"
            ></image>
            <image
              v-else
              :src="$img('/static/icon/check.png')"
              style="width: 40rpx; height: 40rpx"
            ></image>
          </view>
        </view>
        <view style="color: #999; font-size: 24rpx; margin: 20rpx 10rpx">
          下单购买即表示同意
          <text
            style="color: #fff"
            @click="gotoPage('/pages/guize/guize?type=2')"
          >
            《用户服务协议条款》
          </text>
        </view>
        <view class="order_title_btn">
          <view class="total-price">
            共{{ pay_news.goods && pay_news.goods.prize_num }}抽总计:{{
              goods.box_type == 5 ? '' : '￥'
            }}
            <text>
              {{ pay_news.price }}{{ goods.box_type == 5 ? '积分' : '' }}
            </text>
          </view>
          <view
            class="zhifu common_bg"
            @click="pay()"
            :style="{
              'background-image': `url(${$img('/static/img/yf_ljzf.png')})`
            }"
          >
            <!-- 支付 -->
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 奖品弹窗 -->
    <uni-popup
      ref="resPop"
      type="center"
      mask-background-color="rgba(0,0,0,0.8)"
    >
      <view
        class="res-pop common_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img/3_suc_pop.png')})`
        }"
      >
        <view class="res-pop-hd"></view>

        <scroll-view class="res-pop-bd" scroll-y>
          <view class="res-list">
            <view class="res-item" v-for="(item, i) in jp_arr" :key="i">
              <view class="pic">
                <image :src="item.goodslist_imgurl" lazy-load></image>

                <view class="type-tag">{{ item.shang_title }}</view>

                <view class="num">×1</view>
              </view>

              <view class="title hang1">
                {{ item.goodslist_title }}
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="res-pop-ft">
          <view
            class="ft-btn confirm common_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img/btn_bg.png')})`
            }"
            @click="toBag"
          >
            <text>去盒柜</text>
          </view>

          <view
            class="ft-btn common_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img/btn_bg.png')})`
            }"
            @click="close('resPop')"
          >
            确定
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 抽奖统计 -->
    <uni-popup ref="tongji" type="center" :isMaskClick="false">
      <view
        class="popGm common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`
        }"
      >
        <view class="pop_title">统计</view>

        <view class="pop_con">
          <scroll-view
            scroll-y="true"
            style="height: 600rpx"
            @scrolltolower="getjilv"
          >
            <view class="pop_item" v-for="(item, index) in fa_Arr" :key="index">
              <view>
                <image :src="item.userinfo.headimg"></image>
                <view class="name hang1">{{ item.userinfo.nickname }}</view>
              </view>
              <view style="color: #87dfff">冲{{ item.count }}发</view>
            </view>
          </scroll-view>
        </view>

        <image
          @click="$refs.tongji.close()"
          class="close"
          :src="$img('/static/icon/close.png')"
        ></image>
      </view>
    </uni-popup>
    <!-- 详情弹窗 -->
    <uni-popup ref="dPop" type="center">
      <view
        v-if="previewData"
        class="d-pop common_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img/3_detail_pop.png')})`
        }"
      >
        <view class="pic">
          <image :src="previewData.imgurl" lazy-load></image>
        </view>

        <view
          class="title common_bg"
          :style="{
            backgroundImage: `url(${$img('/static/img/3_detail_title.png')})`
          }"
        >
          <text class="hang1">
            {{ previewData.title }}
          </text>
        </view>

        <view class="d-list">
          <view class="d-item">
            {{ previewData.shang_title }} {{ previewData.real_pro }}%
          </view>

          <!-- <view class="d-item">产品类型:{{ optData.type_text }}</view> -->
        </view>

        <view class="close icon" @click="close('dPop')">
          <image :src="$img('/static/img/close.png')" lazy-load></image>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import gbroMarquee from '@/components/gbro-marquee/marquee.vue'
export default {
  components: {
    gbroMarquee
  },
  data() {
    return {
      z_imgPath: this.$z_img2 + 'shouye/',
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      downOption: {
        auto: false
      },
      broadcastStyle2: {
        speed: 100
      },
      // 延时动画
      doamin: false,
      list: [
        {
          name: '赏池预览'
        },
        {
          name: '中赏记录'
        }
      ],
      // 商品id
      goods_id: '',
      show: 0,
      // 赏池
      goods: '',
      order_list: [],
      shang_list: [],
      // 中赏记录
      shang_id: 0,
      /* 默认 超神*/
      shang_cate: [],
      jl_Arr: [],

      type: '',
      pay_news: {},
      prize_num: '',

      // 是否显示订单弹窗
      order_show: false,

      bi: true,
      yue: true,
      num: 1,

      jp_news: {},
      jp_arr: [],
      news: '',
      // 支付失效
      pay_status: false,
      // 动画
      rollTimer: null, //动画定时器句柄
      moveCss: [], //奖励滚动组件的滑动的动画效果css
      luckyNums: 0, //中奖位置
      luckydata: [], //中奖位置数组
      lnStart: 50, //中奖位置区间开始
      lnEnd: 60, //中奖位置区间结束
      items: [], //滚动的卡片列表
      awardItem: [], //中奖道具
      left_px: '',
      tiaotype: 1,
      //抽奖统计
      fa_Arr: [],
      page_num: 1,
      mixTotal: 0, // 统计信息总页数
      shangGoods: [],
      //预览
      current_index: 0,
      join_count: 0,
      hasNum: 0,
      previewData: ''
    }
  },
  onShareAppMessage(e) {
    let that = this
    return {
      title: '简单模玩' + that.goods.title + '系列',
      imageUrl: that.goods.imgurl_detail,
      path:
        '/pages/shouye/detail_wuxian?goods_id=' +
        that.goods_id +
        '&pid=' +
        uni.getStorageSync('userinfo').ID
    }
  },
  onLoad(e) {
    this.goods_id = e.id ? e.id : ''
    setTimeout(() => {
      this.doamin = true
    }, 1000)
    this.getDanye(10)
    if (e.pid) {
      uni.setStorageSync('pid', e.pid)
    }
  },
  watch: {
    jp_arr() {
      for (let i = 0; i < this.jp_arr.length; i++) {
        if (this.jp_arr[i].kaiqi) {
          if (this.jp_arr.length - 1 == i) {
            this.is_tiaoguo = false
            return
          }
        } else {
          this.is_tiaoguo = true
          return
        }
      }
    }
  },

  methods: {
    close(e) {
      this.$refs[e].close()
    },

    open(e) {
      this.$refs[e].open()
    },

    previewDetail(item) {
      console.log(item)
      this.previewData = item

      this.open('dPop')
    },

    toBag() {
      uni.switchTab({ url: '/pages/sangdai/sangdai' })
    },

    yulan(e, a) {
      this.current_index = a

      setTimeout(() => {
        this.$refs.yulanPop.open()
      }, 300)
    },
    getjilv(reload = false) {
      let that = this

      if (reload) {
        this.page_num = 1
        this.fa_Arr = []
      }

      if (this.page_num !== 1 && this.page_num > this.mixTotal) {
        return
      }
      that.req({
        url: 'luck_draw_log',
        Loading: true,
        data: {
          page: that.page_num,
          id: that.goods_id
        },
        success(res) {
          if (res.status == 1) {
            // that.shang_cate = res.data.category;
            that.mixTotal = res.data.last_page
            if (that.page_num === 1) {
              that.fa_Arr = res.data.data
            } else {
              that.fa_Arr = that.fa_Arr.concat(res.data.data)
            }
            that.page_num += 1
            that.$refs.tongji.open()
          }
        }
      })
    },
    tokefu() {
      // #ifdef  MP-WEIXIN
      wx.openCustomerServiceChat({
        extInfo: {
          url: uni.getStorageSync('wx_link') //客服地址链接
        },
        corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
        success(res) {
          console.log(res, 1)
        },
        fail(res) {
          console.log(res, 2)
        }
      })
      // #endif
    },
    getDanye(e) {
      let that = this
      that.req({
        url: 'danye',
        data: {
          type: e
        },
        success(res) {
          if (res.status == 1) {
            that.news = res.data
          }
        }
      })
    },

    sc_collect() {
      let that = this
      that.req({
        url: 'addCollect',
        data: {
          goods_id: that.goods.id
        },
        success(res) {
          if (res.status == 1) {
            if (that.goods.collection_is == 1) {
              that.goods.collection_is = 0
            } else {
              that.goods.collection_is = 1
            }
          }
        }
      })
    },
    back() {
      var pages = getCurrentPages()
      // console.log(pages)

      if (pages.length == 1 && pages[0].route == 'pages/shouye/detail_wuxian') {
        uni.redirectTo({
          url: '/pages/infinite/index'
        })
      } else {
        uni.navigateBack()
      }
    },
    getlist(v) {
      this.show = v
      this.mescroll.resetUpScroll(false)
    },

    tosangdai() {
      uni.setStorageSync('page', this.$mp.page.route)
      uni.switchTab({ url: '/pages/sangdai/sangdai' })

      // uni.redirectTo({
      //   url: '../sangdai/sangdai'
      // })
    },
    change_yuan_index(e) {
      if (e == 1) {
        this.bi = !this.bi
      }
      if (e == 2) {
        this.yue = !this.yue
      }
      this.order_money()
    },
    pay() {
      if (this.hasNum <= 0) {
        return uni.showToast({
          title: '当前无抽奖券',
          icon: 'none'
        })
      }

      let that = this
      that.jp_arr = []
      let info = {
        goods_id: that.goods_id
      }

      that.req({
        url: 'do_draw',
        data: info,
        success(res) {
          if (res.status == 1) {
            that.info = {}
            that.req({
              url: 'prizeorderlog',
              data: {
                order_num: res.data.order_num
              },
              success(aa) {
                if (aa.status == 1) {
                  that.jp_news = aa.data.user_info
                  that.jp_arr = aa.data.data
                  that.open('resPop')
                  that.show = 0
                  that.loadData(1)
                }
              }
            })
          }
        }
      })
    },
    choujiang(e) {
      this.prize_num = e
      this.order_money()
    },
    order_money() {
      let that = this
      that.req({
        url: 'infinite_ordermoney',
        Loading: true,
        data: {
          prize_num: that.prize_num,
          goods_id: that.goods_id,
          use_money_is: that.yue ? 1 : 2,
          use_integral_is: that.bi ? 1 : 2
        },
        success(res) {
          if (res.status == 1) {
            that.$refs.order_show.open()
            that.pay_news = res.data
          }
        }
      })
    },
    change_shang_id(e) {
      this.shang_id = e
      this.mescroll.resetUpScroll(false)
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.mescroll.resetUpScroll(false)
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      this.loadData(page.num)
    },
    loadData(pageNo, showToast = false) {
      let that = this
      that.req({
        url:
          that.show == 0
            ? 'infinite_goodsdetail'
            : that.show == 1
            ? 'infinite_shang_log'
            : '',
        data: {
          page: pageNo,
          goods_id: that.goods_id,
          shang_id: that.shang_id
        },
        // Loading: true,
        success(res) {
          if (res.status == 1) {
            if (showToast) {
              setTimeout(() => {
                uni.showToast({
                  title: '刷新成功',
                  icon: 'success'
                })
              }, 100)
            }

            if (that.show == 0) {
              that.hasNum = res.data.draw_num
              that.goods = res.data.goods
              // setTimeout(()=>{
              that.order_list = res.data.bulletchat
              // },1000)
              //所有商品按赏池分类
              that.join_count = res.data.goods.join_count
              that.shang_list = res.data.goodslist
              that.mescroll.endByPage(res.data.goodslist.length, 1)
              console.log(that.order_list)
              //所有商品未按赏池分类
              that.shangGoods = res.data.goods_list.data
              that.mescroll.endByPage(res.data.goods_list.data.length, 1)
            }
            if (that.show == 1) {
              that.shang_cate = res.data.category
              that.mescroll.endByPage(res.data.data.length, res.data.last_page)
              if (pageNo == 1) {
                that.jl_Arr = res.data.data
              } else {
                that.jl_Arr = that.jl_Arr.concat(res.data.data)
              }
            }
          } else if (res.status == 0) {
            setTimeout(() => {
              uni.navigateBack()
            }, 2000)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.pop_title {
  font-size: 48rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-bottom: 23rpx;
}
.yulanStyle > .shang_img {
  width: 540rpx;
  height: 460rpx;
  position: absolute;
  top: 30rpx;
  left: 28rpx;
  margin: 0 auto;
}
.yulanStyle > .img_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.yulanStyle > view:nth-of-type(1) {
  position: absolute;
  top: 54rpx;
  left: 45rpx;
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  background: rgba(1, 14, 14, 0.83);
  opacity: 0.83;
  border-radius: 29rpx;
  padding: 10rpx 30rpx;
}

.yulanStyle {
  font-size: 47rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  position: relative;
  width: 600rpx;
  height: 794rpx;

  .detail-title {
    position: absolute;
    top: 500rpx;
    left: 130rpx;
    width: 346rpx;
    height: 84rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 30rpx;

    font-size: 28rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
  }

  .detail-type {
    position: absolute;
    top: 618rpx;
    left: 50%;
    transform: translateX(-50%);

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #cccccc;

    text {
      color: #fff;
    }
  }

  .detail-price {
    position: absolute;
    top: 674rpx;
    left: 50%;
    transform: translateX(-50%);

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #cccccc;

    text {
      color: #fff;
    }
  }

  .close {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 70%);
    width: 50rpx;
    height: 50rpx;
  }
}
// 头部样式
.header {
  width: 750rpx;
  height: 450rpx;
  // background: #ffffff;
  font-size: 32rpx;
  color: #ffffff;

  .info-btn {
    position: fixed;
    left: 30rpx;
    display: flex;
    align-items: center;
    z-index: 1;

    image {
      width: 12rpx;
      height: 24rpx;
    }

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .like-btn {
    position: fixed;
    right: 30rpx;
    display: flex;
    align-items: center;
    z-index: 1;

    image {
      width: 24rpx;
      height: 21rpx;
      margin-right: 10rpx;
    }

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .head {
    position: fixed;
    top: 0;
    z-index: 20;
    .status_bar {
      height: var(--status-bar-height);
      width: 100%;
    }
    .header_title {
      height: 70rpx;
      line-height: 70rpx;
      width: 100%;
      box-sizing: border-box;
      font-weight: bold;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      box-sizing: border-box;
      image {
        width: 48rpx;
        height: 48rpx;
      }
      > view:nth-of-type(1) {
        display: flex;
        align-items: center;
      }
      > view:nth-of-type(2) {
        width: 520rpx;
        text-align: center;
        /* margin: auto; */
      }
    }
  }
  &_center {
    > image:nth-of-type(1) {
      width: 146rpx;
      height: 50rpx;
      position: absolute;
      bottom: 75rpx;
      right: 195rpx;
      z-index: 9;
    }
    > image:nth-of-type(2) {
      width: 146rpx;
      height: 50rpx;
      position: absolute;
      bottom: 75rpx;
      right: 20rpx;
      z-index: 9;
    }
    > image:nth-of-type(3) {
      width: 153rpx;
      height: 74rpx;
      position: absolute;
      bottom: 300rpx;
      right: 0;
    }
  }
  &_news {
    width: 750rpx;
    position: absolute;
    bottom: -15rpx;
    &_t {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin-top: 24rpx;
      // width: 750rpx;
      padding-right: 30rpx;
      height: 121rpx;
      box-sizing: border-box;
      padding-bottom: 10rpx;
      transform: translateY(10rpx);
      &_price {
        // width: 200rpx;
        // height: 100rpx;
        padding-left: 30rpx;
        color: #ffffff;
        opacity: 0.87;
        margin-right: 30rpx;
        text-align: center;
        font-size: 24rpx;
        > view:nth-of-type(1) {
          font-size: 32rpx;
          font-family: zihun152hao-jijiachaojihei;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
}
//赏tab
.shangList {
  width: 692rpx;
  height: 138rpx;
  margin: 20rpx auto 30rpx;
  padding: 0 35rpx;
  box-sizing: border-box;
  &_item {
    display: flex;
    height: 138rpx;
    justify-content: start;
    white-space: nowrap;
    align-items: center;
    > view {
      margin: 0 20rpx;
      text-align: center;
    }
    // image{
    // 	width: 101rpx;
    // 	height: 25rpx;
    // }
    view:first-child {
      font-size: 22rpx;
      font-family: zihun147hao-xingyuanhei;
      font-weight: 400;
      color: #fff;
    }
    view:last-child {
      font-family: Source Han Sans CN;
      margin-top: 6rpx;
      font-size: 20rpx;
      color: #fff;
    }
  }
}
//购买说明
.popGm {
  width: 607rpx;
  // height: 904rpx;
  padding-top: 70rpx;
  box-sizing: border-box;
  position: relative;

  .pop_title {
    font-size: 36rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }

  .pop_con {
    padding: 30rpx 40rpx 50rpx;
    box-sizing: border-box;

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 42rpx;
  }

  .close {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 50rpx;
    height: 50rpx;
  }
}
//抽奖统计
.choujiang {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  margin: 0 40rpx;
  > view {
    flex: 1;
  }
}
.pop_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-bottom: 1px solid #BBFFD7;
  color: #fff;
  padding: 20rpx 0;
  box-sizing: border-box;
  margin: 0 auto;
  width: calc(100% - 40rpx);

  > view {
    font-size: 28rpx;
    display: flex;
    align-items: center;

    .name {
      max-width: 200rpx;
    }
  }
  image {
    width: 50rpx;
    height: 50rpx;
    margin-right: 15rpx;
    border-radius: 50%;
  }
}
.bar_box {
  width: 100%;
  position: fixed;
  height: 80rpx;
  z-index: 10;
  left: 0;
  bottom: 40rpx;
  display: flex;
  justify-content: space-around;

  .draw-btn {
    width: 690rpx;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // padding-top: 40rpx;
    box-sizing: border-box;
    background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
    box-shadow: 0rpx 0rpx 9rpx 1rpx rgba(208, 209, 255, 0.2);
    border-radius: 10rpx;

    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0rpx 3rpx 1rpx rgba(0, 0, 0, 0.4);

    &.dis {
      filter: grayscale(1);
    }
  }
}

.headimg {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
  border-radius: 50%;
}

.jilv_list_b > image {
  width: 30rpx;
  height: 30rpx;
  margin-right: 6rpx;
}

.jilv_list_b {
  font-size: 20rpx;
  color: #ffffff;
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.jilv_list_l > text {
  /* font-family: 'zcq'; */
  font-size: 28rpx;
  color: #40eee7;
  margin-right: 10rpx;
}

.jilv_list_l > image:nth-of-type(1) {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
}

.jilv_list_l {
  display: flex;
  align-items: center;
  flex: 7;
}

.jilv_list {
  width: 690rpx;
  // height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  padding: 20rpx;
  box-sizing: border-box;
  color: #ffffff;
  position: relative;

  .log-tag {
    position: absolute;
    left: 0;
    top: 0;
    height: 28rpx;
    padding: 0 30rpx 0 20rpx;
    display: flex;
    align-items: center;
    background: linear-gradient(
      270deg,
      rgba(208, 209, 255, 0) 0%,
      #b080ff 100%
    );

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .jilv_list_l {
    display: flex;
    align-items: center;

    .avatar {
      width: 62rpx;
      height: 62rpx;
      border-radius: 50%;
      overflow: hidden;
    }

    .info {
      width: 250rpx;
      padding-left: 10rpx;

      .name {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      .time {
        margin-top: 10rpx;
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #dddddd;
      }
    }
  }

  .log-item-r {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;

    .type {
      font-size: 26rpx;
      font-family: zihun147hao-xingyuanhei;
      font-weight: 400;
      color: #ffffff;
    }

    .prize {
      display: flex;
      align-items: center;

      .pic {
        width: 40rpx;
        height: 40rpx;
        border-radius: 6rpx;
        overflow: hidden;
        margin-right: 6rpx;
      }

      font-size: 22rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      .prize-title {
        max-width: 160rpx;
      }
    }
  }
}

.jilv_con {
  margin: 20rpx auto 0;
  width: 690rpx;

  border: 1px solid;
  border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
  box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(176, 128, 255, 0.8);
}

.jilv_title .jilv-tab {
  height: 44rpx;
  padding: 0 30rpx;
  display: inline-flex;
  align-items: center;
  margin-right: 26rpx;

  font-size: 22rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;

  &:first-child {
    margin-left: 30rpx;
  }

  &.act {
    color: #d0d1ff;
  }
}

.jilv_title {
  white-space: nowrap;
  margin-top: 30rpx;
}

.jilv {
  margin: 22rpx auto;
  width: 690rpx;
}

// .jp_btn>image{
// 	width: 292rpx;
// 	height: 70rpx;
// }
// .jp_btn>view:nth-of-type(2) {
// 	background: #FF7514;
// 	border-radius: 10rpx;
// }

// .jp_btn>view:nth-of-type(1) {
// 	border: 2rpx solid #FF7514;
// 	border-radius: 10rpx;
// 	color: #FF7514;
// }

.jp_btn > view {
  width: 206rpx;
  height: 84rpx;
  font-size: 43rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
}

.jp_btn {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-evenly;
}
.dhbtmbox {
  width: 750rpx;
  height: 32rpx;
}

.list_img > .type-num {
  height: 40rpx;
  box-sizing: border-box;
  padding: 0 8rpx;
  width: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .type {
    font-size: 22rpx;
    font-family: zihun147hao-xingyuanhei;
    font-weight: 400;
    color: #fff;
  }

  .num {
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}

.list_img > image {
  width: 100%;
  height: 184rpx;
  border-radius: 10rpx;
}

.list_img {
  width: 184rpx;
  height: 184rpx;
  margin: 0 auto;
  /* border-radius: 10rpx; */
  position: relative;

  // border: 1px solid #c5fadc;
  /* box-shadow: 0px 0px 10rpx 0px #FF7514; */
}

.jp_list {
  font-size: 24rpx;
  width: 210rpx;
  margin-top: 20rpx;
  position: relative;
  padding: 10rpx;
  box-sizing: border-box;
}

.pop_gongxi {
  width: 750rpx;
  height: 197rpx;
  display: block;
  margin-bottom: 30rpx;
}

// .jp_title_1 > view:nth-child(3n-1) {
//   margin: 20rpx 30rpx 0 30rpx;
// }

.jp_title_1 {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: auto;
  color: #ffffff;
  // padding-bottom: 15rpx;
  // box-sizing: border-box;
}

.jp_title {
  box-sizing: border-box;
  padding: 0rpx 50rpx;
  box-sizing: border-box;
  height: 100%;
  /* margin-top: 200rpx; */
}
// .jp_name {
// 	font-size: 28rpx;
// 	color: #FFFFFF;
// 	position: absolute;
// 	top: 104rpx;
// 	left: 0;
// 	right: 0;
// 	margin: auto;
// 	z-index: 13;
// }

// .jp_headimg>image {
// 	width: 114rpx;
// 	height: 114rpx;
// 	border-radius: 50%;
// }

// .jp_headimg {
// 	width: 114rpx;
// 	height: 114rpx;
// 	border-radius: 50%;
// 	border: 1px solid #FF7514;
// 	position: absolute;
// 	top: -26rpx;
// 	left: 0;
// 	right: 0;
// 	margin: auto;
// 	z-index: 12;
// }

.pop_jp {
  /* width: 750rpx;
		height: 942rpx;
		margin: auto;
		text-align: center; */
  // height: 854rpx;

  .jp_bg {
    padding-top: 20rpx;
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    width: 750rpx;
    height: 650rpx;
    // padding-top: 363rpx;
    box-sizing: border-box;
    // background-position: 0 90rpx;
    // background-size: 100% calc(100% - 90rpx);
  }

  .suc-pop-hd {
    width: 346rpx;
    height: 94rpx;
    margin: 0 auto;
  }

  .shang-title {
    padding: 10rpx;
    text-align: center;

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}

.fangshi text {
  // color: #70ede8;
}

.fangshi > view > image {
  margin-right: 20rpx;
}

.fangshi image {
  width: 40rpx;
  height: 40rpx;
}

.fangshi {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  line-height: 60rpx;
  align-items: center;
}

.zhifu {
  width: 206rpx;
  height: 84rpx;
  /* background: #FF7514;
		border-radius: 7rpx; */
  font-size: 36rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.order_title_btn {
  width: 690rpx;
  height: 98rpx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  font-size: 24rpx;
  box-sizing: border-box;
  margin-top: 50rpx;

  .total-price {
    font-size: 28rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
  }
}

.order_num text {
  font-size: 32rpx;
  // color: #70ede8;
}

.order_num > view:nth-of-type(2) {
  font-size: 24rpx;
}

.order_num {
  display: flex;
  justify-content: space-between;
  border-top: 1rpx solid #333333;
  margin-top: 20rpx;
  padding: 20rpx 0;
}

.order_pic > view > view:nth-of-type(3) {
  display: flex;
  justify-content: space-between;
  width: 410rpx;
}

.order_pic > view:nth-of-type(2) {
  margin-left: 20rpx;
  font-size: 24rpx;
  color: #ffffff;
  padding-top: 14rpx;
  box-sizing: border-box;
}

.order_pic_img > image {
  width: 168rpx;
  height: 168rpx;
  border-radius: 10rpx;
}

.order_pic_img {
  width: 188rpx;
  height: 188rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.order_pic {
  display: flex;
}

.order_title_con1 {
  width: 690rpx;
  background: rgba(34, 34, 34, 0.5);
  // border: 1px solid #ffffff;
  // box-shadow: 0px 0px 13rpx 0px rgba(15, 195, 197, 0.69);
  margin-top: 28rpx;
  padding: 20rpx 30rpx 10rpx;
  box-sizing: border-box;
}

.order_title > image {
  width: 26rpx;
  height: 26rpx;
  position: absolute;
  right: 14rpx;
  top: 10rpx;
}

.order_title {
  font-size: 36rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #ffffff;
  position: relative;
  text-align: center;
}

.order {
  width: 750rpx;
  height: 994rpx;
  background: #000;
  /* background: rgba(0, 0, 0, 0.9); */
  /* border-radius: 30rpx 30rpx 0px 0px;
		border-top: 5rpx solid #35ED85; */
  position: absolute;
  bottom: 0;
  padding: 30rpx 21rpx 50rpx;
  box-sizing: border-box;
  color: #ffffff;

  border-radius: 20rpx 20rpx 0rpx 0rpx;

  border-top: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #000, #000),
    linear-gradient(20deg, #ffffff, #a11aff, #85dfff, #ba39ff);
  // border-bottom: none;
}

.pop_con {
  max-height: 900rpx;
  // background: rgba(0, 0, 0, 0.5);
  margin: 10rpx auto;
  padding: 20rpx 36rpx;
  font-size: 24rpx;
  line-height: 36rpx;
  color: #ffffff;
  box-sizing: border-box;
}

button::after {
  border: none;
}

button {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
  border-radius: 0;
}

.xuanfu image {
  width: 94rpx;
  height: 110rpx;
  margin-top: 20rpx;
}

.xuanfu {
  position: fixed;
  bottom: 220rpx;
  right: 20rpx;
  width: 104rpx;
  z-index: 21;
}

.qiehuan {
  display: flex;
  justify-content: space-between;
  width: 750rpx;
  margin-top: 20rpx;
}

.qiehuan_line {
  margin: 10rpx auto 0;
  width: 32rpx;
  height: 4rpx;
  background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
  border-radius: 2rpx;
}

.qiehuan_line > image {
  width: 26rpx;
  height: 16rpx;
}

.wzs {
  font-size: 32rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.xzs {
  font-size: 32rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: transparent;

  background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
  background-clip: text;
}

.lunbo_r image {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  margin-right: 6rpx;
}

.lunbo_r > view:nth-of-type(1) {
  color: #ff7315;
}

.lunbo_r {
  font-size: 24rpx;
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  color: #ffffff;
}

.lunbo > image:nth-of-type(1) {
  width: 132rpx;
  height: 132rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.lunbo {
  display: flex;
  align-items: center;
  height: 172rpx;
  margin-left: 20rpx;
}

.zmd {
  width: 690rpx;
  height: 172rpx;
  margin: 20rpx auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #ff7315;
}

.goods_v_1 {
  width: 250rpx;
  height: 250rpx;
  border-radius: 10rpx;
}

.gmsm {
  width: 147rpx;
  height: 34rpx;
}

.goods_v_2_top {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  color: #ffffff;
  text-align: center;
}

.goods_v_2_top > image {
  width: 40rpx;
  height: 40rpx;
}

.goods_v_2 {
  box-sizing: border-box;
  font-size: 24rpx;
  color: #ffffff;
  width: 370rpx;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods_v_2 > .hang2 {
  height: 80rpx;
  font-size: 28rpx;
}

.goods_v_2 > .flex_center {
  justify-content: space-between;
}

.jiaqian {
  font-size: 24rpx;
  color: #ff7514;
  text-shadow: 0px 0px 14rpx #ff7514;
}

.goods_v_2 > image {
  width: 119rpx;
  height: 25rpx;
}

.goods_v_2 text {
  font-size: 40rpx;
  margin: 0 2rpx;
}

.redu {
  // width: 250rpx;
  height: 40rpx;
  font-size: 24rpx;
  margin-top: 34rpx;
  line-height: 40rpx;
  /* overflow: hidden; */
  display: flex;
  align-items: center;
}

.redu > image {
  width: 40rpx;
  height: 40rpx;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.content {
  padding-bottom: 200rpx;
  // background: #222222;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;

  .hot-num {
    margin: 0 auto;
    width: 710rpx;
    height: 70rpx;
    background: rgba(208, 209, 255, 0.1);
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-list {
      display: flex;

      .avatar {
        width: 50rpx;
        height: 50rpx;
        background: #7f7f7f;
        border: 1px solid #cccccc;
        box-sizing: border-box;
        border-radius: 50%;
        overflow: hidden;
      }

      .avatar + .avatar {
        margin-left: -16rpx;
        position: relative;
      }
    }

    .num {
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #dddddd;
    }
  }

  .tong-ji {
    position: absolute;
    right: 30rpx;
    z-index: 10;
    display: flex;
    align-items: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 6rpx;
    }

    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .sw-wrap {
    width: 100%;
    height: 330rpx;

    .pic {
      width: 330rpx;
      height: 100%;
      margin: 0 auto;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .ticket-num {
    margin: 40rpx 0 0;
    display: flex;
    justify-content: center;

    .ticket-num-inner {
      padding: 6rpx 12rpx;
      border: 1px solid;
      border-image: linear-gradient(90deg, #6adeff, #7ab5ff, #ff7feb) 1 1;

      font-size: 26rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: transparent;
      background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
      background-clip: text;
    }
  }

  .goods-title {
    margin: 30rpx auto 0;
    width: 590rpx;
    height: 50rpx;
    padding: 0 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .type-list {
    margin: 30rpx auto 0;
    width: 710rpx;
    box-sizing: border-box;
    padding: 30rpx 60rpx;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .type-item {
      width: 45%;
      display: flex;
      align-items: center;
      margin: 10rpx 0;

      .dot {
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background: #dddddd;
        margin-right: 20rpx;
      }

      .title {
        font-size: 34rpx;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;

        text {
          padding-left: 10rpx;

          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #cccccc;
        }
      }
    }
  }
}

.sangs {
  font-size: 24rpx;
  margin: 6rpx 0;
}

.sp_head > text {
  font-size: 24rpx;
  color: #333333;
}

.sp_shang > image {
  width: 25rpx;
  height: 33rpx;
  margin-right: 10rpx;
}

.sp_shang {
  color: transparent;
  /* background: linear-gradient(90deg, #A3BFFF 0%, #9FE5CF 35%, #FFD1AF 72%, #FFB8C9 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
  /* font-family: 'zcq'; */
  display: flex;
  align-items: center;
  font-size: 28rpx;
  margin-right: 6rpx;
}

.sp_head {
  font-size: 20rpx;
}

.sp {
  width: 690rpx;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10rpx;
  margin: 20rpx auto 0;
  border-radius: 10rpx;
  color: #ffffff;
  padding: 20rpx;
  box-sizing: border-box;
}

.spt > view {
  width: 166rpx;
  margin-right: 25rpx;
  flex-shrink: 0;
}

.spt {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  overflow-y: hidden;
  overflow-x: scroll;
}

.imgs {
  width: 168rpx;
  height: 168rpx;
  border-radius: 8rpx;
  display: flex;
}
.spbox {
  width: 690rpx;
  margin: 22rpx auto 0;
}

.sang:nth-child(1) {
  margin-left: 20rpx;
}
.shop_con {
  padding: 10rpx;
  box-sizing: border-box;
  line-height: 40rpx;
  /* background: #000000; */
  border-radius: 0 0 10rpx 10rpx;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.6);
}

.qiangguang > image {
  width: 100rpx;
  height: 52rpx;
}

.qiangguang {
  width: 220rpx;
  height: 214rpx;
  background: rgba(0, 0, 0, 0.7);
  // border-radius: 7rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0rpx;
  left: 0rpx;
}
.item_num {
  background: rgba(21, 23, 23, 0.8);
  bottom: 0rpx;
  left: 0rpx;
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40rpx;
}
.item_num > view:nth-of-type(2) {
  font-size: 20rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  /* font-style: italic; */
  color: #ffffff;
}

.item_num > view:nth-of-type(1) {
  padding: 0 14rpx;
  box-sizing: border-box;

  font-size: 28rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #fff;
}

.item_head > image {
  width: 100%;
  height: 206rpx;
  border-radius: 10rpx;
  /* border-radius: 7rpx; */
}

.item_head {
  width: 100%;
  height: 206rpx;
  position: relative;
}

.shop_item {
  width: 210rpx;
  margin: 30rpx 0 0;
  position: relative;
  box-sizing: border-box;
  color: #ffffff;
  border-radius: 10rpx;
  background-color: #111;
  border: 1px solid;
  border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
}

.shop_item:nth-child(3n-1) {
  margin: 30rpx 30rpx 0;
}

.shop {
  padding: 1rpx 30rpx 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.d-pop {
  position: relative;
  width: 610rpx;
  height: 820rpx;
  padding: 40rpx;
  box-sizing: border-box;

  .pic {
    width: 100%;
    height: 530rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
  }

  .title {
    margin: 40rpx auto 0;
    width: 410rpx;
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 30rpx;
    .hang1 {
    }

    text {
      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .common_bg {
  }

  .d-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 20rpx 0 0;

    .d-item {
      margin-top: 14rpx;

      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .close {
    width: 48rpx;
    height: 48rpx;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 160%);
  }
  .icon {
  }
}

.res-pop {
  width: 100%;
  height: 758rpx;
  position: relative;

  .res-pop-hd {
    height: 120rpx;
  }

  .res-pop-bd {
    height: 620rpx;

    .res-list {
      padding: 0 30rpx 30rpx;
      display: grid;
      grid-template-columns: repeat(3, 210rpx);
      gap: 30rpx 30rpx;

      .res-item {
        width: 100%;
        border: 1px solid;
        border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
        box-sizing: border-box;
        background: #111111;

        .pic {
          width: 100%;
          height: 210rpx;
          position: relative;

          image {
            width: 100%;
            height: 100%;
            border-radius: inherit;
          }

          .type-tag {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            padding: 0 16rpx;
            height: 32rpx;
            background: linear-gradient(90deg, #729fdb 0%, #d0dbff 100%);
            display: flex;
            align-items: center;

            font-size: 20rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #222222;
          }
          .num {
            position: absolute;
            z-index: 2;
            right: 6rpx;
            bottom: 6rpx;
            padding: 0 16rpx;
            height: 32rpx;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 16rpx;
            display: flex;
            align-items: center;

            font-size: 24rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #d0d1ff;
          }
        }

        .title {
          padding: 10rpx 10rpx;

          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
        .hang1 {
        }
      }
    }
  }

  .res-pop-ft {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    transform: translateY(100%);
    padding-top: 40rpx;

    .ft-btn {
      width: 230rpx;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      &.confirm {
        text {
          color: transparent;

          background: linear-gradient(
            90deg,
            #6adeff 0%,
            #7ab5ff 50%,
            #ff7feb 100%
          );
          background-clip: text;
        }
      }
    }
  }
}
</style>
